<template>
	<view>
		<view class="bigbox">
			<view class="box">
				<image src="../../static/mylogo.png" mode="aspectFit"></image>
				<text>研海</text>
			</view>
		</view>
		<view class="userbox">
			<view class="username">
				<input class="name" placeholder="请输入账号" type="text" v-model="loginform.zhanghao"
					placeholder-class="placeholder"></input>
			</view>
			<view class="password">
				<input class="pword" placeholder="请输入密码" type="password" v-model="loginform.mima"
					placeholder-class="placeholder"></input>
			</view>
			<button @click="judgeLogin">登录</button>
		</view>
		<view class="zhuce">
			<button plain="true" @click="gotoLogin">注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: "",
				password: "",
				loginform: {
					zhanghao: "",
					mima: ""
				}
			}
		},
		onLoad() {

		},
		methods: {
			gotoLogin() {
				uni.navigateTo({
					url: './login'
				})
			},
			judgeLogin() {
				uni.request({
					url: this.baseurl + '/login',
					method: "GET",
					// header: {
					// 	'content-type': "application/json",
					// },
					data: {
						userId: this.loginform.zhanghao,
						password: this.loginform.mima,
					},
					success: (res) => {
						// console.log(this.loginform.zhanghao, this.loginform.mima)
						console.log(res.data);
						if (res.data.status == "success") {
							getApp().globalData.userId = this.loginform.zhanghao
							uni.showToast({
								title: "登录成功",
								icon: 'none',
								duration: 2000,
							});
							setTimeout(() => {
								uni.switchTab({
									url: "../firstpage/FirstPage"
								})
							}, 1000);
							try {
								uni.setStorageSync('userId', this.loginform.zhanghao)
								// console.log("获取到的缓存" + this.loginform.zhanghao)
							} catch (e) {
								uni.showToast({
									title:"缓存出错",
									icon:'none',
									duration:2000
								})
							}
						} else {
							uni.showToast({
								title: "账号不存在或密码错误",
								icon: 'none',
								duration: 2000,
							});
						}
					}
				});
			}

		}

	}
</script>

<style lang="scss">
	.bigbox {
		display: flex;
		flex-direction: row;
		justify-content: center;

		.box {
			margin-top: 150rpx;
			//background-color: #333333;
			//height: 150rpx;
			//width: 200rpx;
			display: flex;
			flex-direction: row;

			image {
				//background-color: #4CD964;
				height: 200rpx;
				width: 200rpx;
			}

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				//margin-top: 40rpx;
				font-size: 80rpx;
				font-weight: bold;
				//background-color: #F0AD4E;
			}
		}
	}

	.userbox {
		//height: 500rpx;
		width: 100%;
		//background-color: #2C405A;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.username {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
			height: 100rpx;
			width: 80%;
			background-color: #F2F2F2;
			border-radius: 20rpx;

			.name {
				width: 500rpx;
				height: 60rpx;
				//background-color: #2C405A;

				.placeholder {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.password {
			margin-top: 50rpx;
			height: 100rpx;
			width: 80%;
			background-color: #F2F2F2;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.pword {
				width: 500rpx;
				height: 60rpx;

				//background-color: #2C405A;
				.placeholder {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		button {
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #007AFF;
			color: #FFFFFF;
			border-radius: 20rpx;
			width: 200rpx;
		}
	}

	.zhuce {
		//background-color: #2C405A;
		margin-top: 40vh;

		button {
			border-color: #FFFFFF;
			font-weight: bold;
		}
	}
</style>
